<template>
  <view>
    <u--form labelWidth="80" labelPosition="left" :model="dataLis" :rules="rules" ref="uform">
      <u-form-item label="用户姓名" prop="name" ref="_name" borderBottom>
        <u--input placeholder="为了方便沟通，建议使用实名" v-model="dataLis.name" border="none"></u--input>
      </u-form-item>
      <u-form-item label="绑定方式" prop="phoneType" borderBottom ref="_phoneType">
        <u-radio-group placement="row" v-model="dataLis.phoneType" @change="groupChange">
          <u-radio
            v-for="(item, index) in phoneTypeRadiolist"
            :key="index"
            :label="item.label"
            :name="item.name"
            :customStyle="{ marginRight: '10px' }"
            @change="radioChange"
          >
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item v-if="dataLis.phoneType == 'wx'" label="手机号码" prop="phone" borderBottom>
        <u--input disabledColor="#FFFFFF" disabled v-model="dataLis.phone" border="none"></u--input>
        <button slot="right" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNum">
          获取微信绑定的号码
        </button>
      </u-form-item>
      <u-form-item v-else label="手机号码" prop="phone" borderBottom>
        <u--input v-model="dataLis.phone" border="none"></u--input>
      </u-form-item>
      <u-form-item v-if="dataLis.phoneType == 'custom'" label="短信验证" prop="authCode" borderBottom>
        <u--input style="margin-right: 10px" v-model="authCode" border="none"></u--input>
        <u-button
          slot="right"
          @tap="getCode"
          :text="authCodeTips"
          type="success"
          size="mini"
          :disabled="disabled1"
        ></u-button>
      </u-form-item>
    </u--form>

    <view class="bottom-group">
      <view class="tip">
        <u-checkbox-group v-model="isRead">
          <u-checkbox name="read"></u-checkbox>
        </u-checkbox-group>
        我已阅读并同意<a class="herf">《用户协议》</a>和<a class="herf">《隐私协议》</a>
      </view>
      <u-button type="primary" text="确定登录" @click="submit"></u-button>
      <u-gap height="6"></u-gap>
      <u-button :customStyle="customStyle_" size="mini" text="取消返回" @click="closePage"></u-button>
    </view>
  </view>
</template>

<script>
var Apis = {
  createId: '/Open/Auth/CreateId',
  getPhoneNum: '/Open/Auth/GetPhoneNum',
}
export default {
  data() {
    return {
      customStyle_: { width: '100px', border: '0px' },
      authCode: '',
      isRead: [],
      authCodeTips: '发送验证码',
      dataLis: {
        name: '',
        role: 'worker',
        phoneType: 'wx', //custom
        phone: '',
      },
      phoneTypeRadiolist: [
        {
          name: 'wx',
          label: '微信绑定的手机',
        },
        {
          name: 'custom',
          label: '使用其他号码',
        },
      ],
      rules: {
        name: {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change'],
        },
        phone: {
          type: 'string',
          required: true,
          message: '选择微信授权或者手动输入',
          trigger: ['blur', 'change'],
        },
      },
    }
  },
  onLoad(opt) {},
  methods: {
    submit() {
      this.$refs.uform
        .validate()
        .then((res) => {
          return this.$http.post(Apis.createId, {
            Name: this.dataLis.name,
            Roles: ['worker'],
            Wid: this.$store.getters.wid,
            Phone: this.dataLis.phone,
          })
        })
        .then((res) => {
          return this.$store.dispatch('user/setToken', res)
        })
        .then((res) => {
          uni.navigateBack()
        })
        .catch((err) => {
          uni.$u.toast(JSON.stringify(err))
        })
    },

    getPhoneNum(data) {
      this.$http
        .get(Apis.getPhoneNum, {
          params: { code: data.detail.code },
        })
        .then((res) => {
          this.dataLis.phone = res
        })
    },

    checkboxChange(e) {
      console.log(111111111)
    },
    radioChange(e) {
      console.log(e)
    },
    groupChange(e) {
      console.log(e)
    },
  },
}
</script>
<style lang="scss" scoped>
.bottom-group {
  width: 90%;
  position: fixed;
  bottom: 68upx;
  left: 5%;
  display: flex;
  flex-direction: column;
  .tip {
    margin: 18upx 0;
    font-size: 26upx;
    display: flex;
    justify-content: center;
    .herf {
      color: chocolate;
    }
  }
}
</style>
